<template>
  <div>
    <el-table :height="400" :data="tableDataList" style="width: 100%" border>
      <!-- <el-table-column sortable align="center" prop="item" label="商品"></el-table-column>
      <el-table-column sortable align="center" prop="category" label="品类"></el-table-column>
      <el-table-column sortable align="center" prop="picUrl" label="图片">
        <template slot-scope="scope">  
          <img :src="scope.row.picUrl" style="width: 100px; height: auto;" />  
        </template>  
      </el-table-column>
       -->
      <el-table-column align="center" prop="firstLevelColumn" label="一级"></el-table-column>
      <el-table-column align="center" prop="secondLevelColumn" label="二级"></el-table-column>
      <el-table-column align="center" prop="threeLevelColumn" label="三级"></el-table-column>
      <!-- <el-table-column sortable align="center" prop="isNew" label="新老品"></el-table-column> -->
      <el-table-column sortable align="center" prop="salesAmount" label="销售金额(万)"
        :formatter="stateFormat"></el-table-column>
      <el-table-column :formatter="PerseFormat" align="center" prop="salesAmountRatio" label="销售金额占比(占比一级类目)"
        width="150"></el-table-column>
      <!-- <el-table-column sortable align="center"
        prop="oldInFirstLevelAmountRatio"
        label="老品销售额占比一级类目"
        width="200"
      ></el-table-column> -->
      <!-- <el-table-column sortable
        :formatter="PerseFormat"
        align="center"
        prop="salesAmountYoy"
        label="销售金额同比"
      ></el-table-column> -->
      <el-table-column sortable align="center" prop="salesNumber" label="销售件数"
        :formatter="numberFormat"></el-table-column>
      <el-table-column width="200" sortable :formatter="PerseFormat" align="center" prop="salesNumberRatio"
        label="销售件数占比(占比一级类目)"></el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="nextYearProAmountRatio" label="下一年同期品销额占比"
        width="200"></el-table-column>
      <el-table-column sortable align="center" prop="avgSalePrice" label="件均单价"
        :formatter="stateFormat"></el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="discountRate" label="折扣率"></el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="returnRate" label="退货率"></el-table-column>
      <!-- <el-table-column sortable align="center" prop="returnYoy" label="退货同比"></el-table-column> -->
      <!-- <el-table-column sortable :formatter="PerseFormat" align="center" prop="sellOutRate" label="售罄率"></el-table-column> -->
      <el-table-column sortable align="center" prop="visitors" label="商品访客数" :formatter="numberFormat"></el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="visitorsRatio"
        label="访客数占总比"></el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="payConversionRate"
        label="转化率"></el-table-column>
      <!-- <el-table-column sortable align="center"
        prop="inventoryQuantity"
        label="库存数量"
      ></el-table-column>
      <el-table-column sortable align="center"
        prop="inventoryAmount"
        label="库存金额"
      ></el-table-column> -->
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableDataList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>